<template>
  <div class="app-container">
    <el-watermark
      :content="['Liwen-左左√', '']"
      :gap="[200, 350]"
      :width="200"
      :height="100"
      :font="font"
    >
      <el-row :gutter="20">
        <!--用户数据-->
        <el-col :span="24" :xs="24">
          <el-form
            :model="queryParams"
            ref="queryRef"
            :inline="true"
            @submit.prevent
          >
            <el-form-item label="" prop="mobile">
              <el-input
                placeholder="手机号"
                clearable
                v-model="queryParams.mobile"
                style="width: 250px; height: 35px"
                @change="handleQuery()"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleImport()"
                v-hasPermi="['kf:operate:add']"
                >执行任务
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="multiple"
                @click="handleDelete"
                v-hasRole="['admin', 'project']"
              >
                删除
              </el-button>
            </el-form-item>
          </el-form>

          <el-table
            border
            v-loading="loading"
            :data="list"
            @selection-change="handleSelectionChange"
            ref="tableRef"
          >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="序号" width="50px" type="index" />
            <el-table-column label="手机号" prop="mobile" />
            <el-table-column label="模块" prop="modelName">
              <template #default="scope">
                <el-tag type="info"  v-if="scope.row.modelName == 0">
                  按需导入
                </el-tag>
                <el-tag type="success"  v-if="scope.row.modelName == 1">
                  新核心
                </el-tag>
                <el-tag type="primary" v-if="scope.row.modelName == 2">
                  老核心
                </el-tag>
                <el-tag type="warning" v-if="scope.row.modelName == 3">
                  emc会员
                </el-tag>
                <el-tag type="danger" v-if="scope.row.modelName == 4">
                  yika(新+老)
                </el-tag>

              </template>
            </el-table-column>
            <el-table-column label="状态" prop="flag">
              <template #default="scope">
                <el-tag
                  effect="dark"
                  size="large"
                  type="success"
                  v-if="scope.row.flag == 1"
                  style="width: 80%"
                >
                  成 功
                </el-tag>
                <el-tag
                  effect="dark"
                  size="large"
                  type="primary"
                  v-else-if="scope.row.flag == 0"
                  style="width: 80%"
                >
                  执行中
                </el-tag>
                <el-tag
                  effect="dark"
                  size="large"
                  type="danger"
                  v-else
                  style="width: 80%"
                >
                  失 败
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="耗时" prop="consume" />
            <el-table-column label="执行人" prop="createBy" />
            <el-table-column label="开始时间" prop="createTime" width="200px" />
            <el-table-column label="结束时间" prop="updateTime" width="200px" />

            <el-table-column label="操作" prop="">
              <template #default="scope">
                <el-button
                  @click="handleDetails(scope.row)"
                  v-hasPermi="['kf:operate:task:list']"
                  >任务详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="reload()"
          />
        </el-col>
      </el-row>
      <!-- 编辑 -->
      <ImportDataPage
        v-model:visible="isImportVisible"
        v-if="isImportVisible"
        :data="current"
        @done="reload"
      />
      <!-- 子任务详情 -->
      <Subtask
        v-model:visible="taskVisible"
        v-if="taskVisible"
        :data="taskVo"
      />
    </el-watermark>
  </div>
</template>
<script setup>
import { kfOperateApi } from "@/api/kernel/kf-operate.js";
import ImportDataPage from "./import.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import Subtask from "./subtask.vue";

const font = reactive({
  // color: "rgba(224,255,255,1)",
  color: "#87cefa",
  fontSize: 18,
});

const tableRef = ref(null);
const multiple = ref(true);
const isImportVisible = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  mobile: "",
});
const total = ref(0);
const loading = ref(true);
const list = ref([]);

const reload = () => {
  kfOperateApi.getPageList(queryParams.value).then((res) => {
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
};
const current = ref(null);
const handleImport = () => {
  isImportVisible.value = true;
};
//#- 重置
const resetQuery = () => {
  queryParams.value.pageNum = 1;
  queryParams.value.mobile = "";
  reload();
};
// #- 多选
const ids = ref([]);
const selectionList = ref([]);
const handleSelectionChange = (selection) => {
  selectionList.value = selection;
  multiple.value = !selection.length;
};
// #- 删除
const handleDelete = () => {
  ids.value = selectionList.value.map((item, i) => item.id);
  let mobiles = selectionList.value.map((item, i) => item.mobile);
  console.log(ids.value);
  ElMessageBox({
    title: `Message`,
    message: h("p", null, [
      h("span", null, "确认要删除 "),
      h("span", { style: "color: red" }, `${mobiles}的数据吗?`),
    ]),
    showCancelButton: true,
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
  })
    .then(({ value }) => {
      kfOperateApi.remove(ids.value).then((res) => {});
      setTimeout(() => {
        ElMessage({
          type: "success",
          message: `删除成功！`,
        });
        reload();
      }, 1000);
    })
    .catch(() => {
      tableRef.value.clearSelection();
    });
};
//#- 子任务详情
const taskVisible = ref(false);
const taskVo = ref(null);
const handleDetails = (row) => {
  // console.log(row);
  taskVo.value = row;
  taskVisible.value = true;
};

const handleQuery = () => {
  reload();
};

onMounted(() => {
  reload();
});
</script>
